<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./jquery-3.7.1.min.js"></script>
</head>
<body>
    <div class="box">类选择器</div>
    <span>元素选择器</span>
    <a id="it">ID选择器</a>

    <ul class="topnav">
        <li>item 1</li>
        <li>
            <ul>
                <li>child item 1</li>
                <li>child item 2</li>
                <li>child item 3</li>
            </ul>
        </li>
        <li>item 3</li>

    </ul>

    <script>

        //类选择器
        $('.box').html('jQuery类选择器')

        //元素选择器
        $('span').html('jQuery元素选择器')

        //ID选择器
        $('#it').html('jQuery ID选择器')

        //子元素选择器
        $('.topnav > li ').css('border','3px solid red')

        //后代选择器
        $('.topnav li').css('border','2px solid blue')


    </script>
</body>
</html>